<template>
    <div>
        <div class="searchBox">
            <el-button  class="searchBtn" type="primary" size= 'medium' v-show="isSearch" @click = "returnDishType()">返回</el-button>
            <diySelect :optionData="optionData" @choose="searchType" size="medium" :propsValue="selectValue" class="searchType"></diySelect>     
            <div class="btnBox">
                <el-button  class="newType" type="primary" size= 'medium' v-show="showDishType" @click="newTypes()">新增类别</el-button>
                <el-button  class="newType" type="primary" size= 'medium' v-show="showSearchDishs" @click="deleteDishType()">删除类别</el-button>
            </div>      
        </div>
        <!-- 展示所有菜品类别 -->
        <div v-show="showDishType">
            <el-table :data = 'currentData' style="width:100%" border
            :header-cell-style="this.$store.state.headerCssObj"    
            :cell-style="this.$store.state.cellCssObj"
            class="types"
            >
                <el-table-column align = 'center' prop = 'id' label = 'id'></el-table-column>
                <el-table-column align = 'center' prop = 'name' label = '类别'></el-table-column> 
                <el-table-column align = 'center' label = '操作' >
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="beforeEditDishType(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="beforeShowDishs(scope.row)">删除</el-button>
                    </template>
                </el-table-column> 
            </el-table>
            <div class="paging"><paging :obj = 'pagingData' ></paging></div> 
        </div>
        
        <!-- 新增类别弹出框 -->
        <el-dialog center
            title="新增类别"
            :visible.sync="showNewDishType"
            width="25%" >
            <ul class="formBox">
                <li class="formItem">
                    <label for="">类别名：</label>
                    <el-input v-model="dishTypeName" size = 'medium' placeholder="请输入新增的类别名"></el-input>
                </li>
                <li class="formItem">
                    <el-button   type="primary" size= 'medium' @click="confirmNewType()">确认</el-button>
                    <el-button   type="primary" size= 'medium' @click="cancelNewType()">取消</el-button>
                </li>
            </ul>
        </el-dialog>
        <!-- 修改类别提示框 -->
        <el-dialog center
            title="修改类别"
            :visible.sync="showEditDishType"
            width="25%" >
            <ul class="formBox">
                <li class="formItem">
                    <label for="">类别名：</label>
                    <el-input v-model="dishTypeName" size = 'medium'></el-input>
                </li>
                <li class="formItem">
                    <el-button   type="primary" size= 'medium' @click="confirmEditType()">确认</el-button>
                    <el-button   type="primary" size= 'medium' @click="cancelEditType()">取消</el-button>
                </li>
            </ul>
        </el-dialog>
        <!-- 新增是否成功提示框 -->
        <el-dialog center
            title="提示"
            :visible.sync="beforeNewTypeSuccess"
            width="30%">
            <p class="tips"><input type="text" v-model="tips" readonly></p>
            <div class="operateBtn">
                <el-button   type="primary" size= 'medium' @click="isNewSuccess()">确定</el-button>
            </div>   
        </el-dialog>
        <!--删除类别提示  -->
        <el-dialog center
            title="删除"
            :visible.sync="beforeDeleteType"
            width="30%">
            <p class="tips">
                <el-input v-model="tips" readonly size = 'medium'></el-input>
            </p>
            <div class="operateBtn">
                <el-button   type="primary" size= 'medium' @click="showDishs()">确定</el-button>
            </div>   
        </el-dialog>
        <el-dialog center
            title="修改"
            :visible.sync="beforeEditType"
            width="30%">
            <p class="tips">
                <el-input v-model="dishTypeName" size = 'medium'></el-input>
            </p>
            <div class="operateBtn">
                <el-button   type="primary" size= 'medium' @click="confirmEditType()">确定</el-button>
            </div>   
        </el-dialog>
        <!-- 展示该类别下的所有菜品
        <el-dialog center
            title="菜品详情"
            :visible.sync="isShowDishDetail"
            width="60%">
            <el-table :data = 'currentData' style="width:100%" 
            :header-cell-style="this.$store.state.headerCssObj"    
            :cell-style="this.$store.state.cellCssObj" 
            >
                <el-table-column align = 'center' prop = 'name' label = '菜名'></el-table-column>
                <el-table-column align = 'center' prop = 'price' label = '单价'></el-table-column>
                </el-table-column>
                <el-table-column align = 'center' label = '操作' >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="deleteDish(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column> 
                
            </el-table> 
            <div class="paging"><paging :obj = 'pagingData' ></paging></div> 
            <div class="operateBtn">
                <el-button   type="primary" size= 'medium' @click="deleteDishType()">删除</el-button>
                <el-button   type="primary" size= 'medium' @click="cancelDeleteType()">取消</el-button>
            </div>   
        </el-dialog> -->
        <!-- 展示该类别下的所有菜品 -->
        <div v-show="showSearchDishs">
            <el-table :data = 'allDishData' style="width:100%" border
            :header-cell-style="this.$store.state.headerCssObj"    
            :cell-style="this.$store.state.cellCssObj"  class="types"
            >
                <el-table-column align = 'center' prop = 'name' label = '菜名'></el-table-column>
                <el-table-column align = 'center' prop = 'price' label = '单价'></el-table-column>
                </el-table-column>
                <el-table-column align = 'center' label = '操作' >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="deleteDishs(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column> 
                
            </el-table>
            <div class="paging"><paging :obj = 'SearchPagingData' ></paging></div> 
        </div>
        
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "foodsTypePage",
        data(){
            return{  
                showDishType:true,//页面加载，显示菜品类别表
                showSearchDishs:false,//点击搜索按钮后显示该类别下的菜品详情信息
                isShowDishDetail:false,//点击详情显示该菜品类别下的所有菜品
                beforeDeleteType:false,//控制删除提示的弹出框
                showNewDishType:false,//控制新增菜品类型的弹出框
                beforeNewTypeSuccess:false,//控制是否新增成功弹出框
                showEditDishType:false,
                beforeEditType:false,
                allDishData:[],
                selectValue:'',
                isSearch:false,
                tips:'',
                row:3,
                TypePageCount:0,
                selectType:'',
                currentPage:1,
                dishTypeName:'',
                remarks:'',
                dishTypeId:'',
                dishId:'',
                dishDetails:
                    [
                        {id:1,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:2,name:'香蕉',type:'水果',price:55,number:0},
                        {id:3,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:4,name:'梨子',type:'水果',price:65,number:0},
                        {id:5,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:6,name:'西瓜',type:'水果',price:65,number:0},
                        {id:7,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:8,name:'芒果',type:'水果',price:65,number:0},
                        {id:9,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:10,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:12,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:13,name:'香蕉',type:'水果',price:55,number:0},
                        {id:14,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:15,name:'梨子',type:'水果',price:65,number:0},
                        {id:11,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:15,name:'西瓜',type:'水果',price:65,number:0},
                        {id:16,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:17,name:'芒果',type:'水果',price:65,number:0},
                        {id:18,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:19,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:20,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:21,name:'香蕉',type:'水果',price:55,number:0},
                        {id:22,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:23,name:'梨子',type:'水果',price:65,number:0},
                        {id:24,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:25,name:'西瓜',type:'水果',price:65,number:0},
                        {id:26,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:27,name:'芒果',type:'水果',price:65,number:0},
                        {id:28,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:29,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:30,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:1,name:'香蕉',type:'水果',price:55,number:0},
                        {id:2,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:3,name:'梨子',type:'水果',price:65,number:0},
                        {id:4,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:5,name:'西瓜',type:'水果',price:65,number:0},
                        {id:6,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:7,name:'芒果',type:'水果',price:65,number:0},
                        {id:8,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:9,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:10,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:1,name:'香蕉',type:'水果',price:55,number:0},
                        {id:2,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:3,name:'梨子',type:'水果',price:65,number:0},
                        {id:4,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:5,name:'西瓜',type:'水果',price:65,number:0},
                        {id:6,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:7,name:'芒果',type:'水果',price:65,number:0},
                        {id:8,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:9,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:10,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:1,name:'香蕉',type:'水果',price:55,number:0},
                        {id:2,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:3,name:'梨子',type:'水果',price:65,number:0},
                        {id:4,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:5,name:'西瓜',type:'水果',price:65,number:0},
                        {id:6,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:7,name:'芒果',type:'水果',price:65,number:0},
                        {id:8,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:9,name:'黄瓜',type:'蔬菜',price:65,number:0},
                        {id:10,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:1,name:'香蕉',type:'水果',price:55,number:0},
                        {id:2,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:3,name:'梨子',type:'水果',price:65,number:0},
                        {id:4,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:5,name:'西瓜',type:'水果',price:65,number:0},
                        {id:6,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:7,name:'芒果',type:'水果',price:65,number:0},
                        {id:8,name:'西红柿',type:'蔬菜',price:65,number:0},
                        {id:9,name:'黄瓜',type:'蔬菜',price:65,number:0},
                    ],
            }
        },
        computed:{
            ...mapState('foodsTypeSet',['allDishType','pageSize','dishData','currentDishType','TypePageSize']),
            reqDishTypeData(){
                let obj = {
                    countPage:this.row,
                    perPage:this.currentPage
                }
                return obj
            },
            pageCount(){
                return this.TypePageSize
            },
            // TypePageCount(){
            //     return this.TypePageSize
            // },
            // allDishData(){
            //     let data = []
            //     for(let i = 0; i < this.dishData.length; i ++){
            //         let obj = {}
            //         obj.id = this.dishData[i].dishes_main_id;
            //         obj.name = this.dishData[i].name;
            //         obj.url = 'http://47.93.251.150:8080/cy/image/' + this.dishData[i].dishesAppendix.dishes_appendix_name
            //         obj.price = this.dishData[i].price
            //         obj.type = this.dishData[i].dishesClassify.name
            //         console.log(obj.url)
            //         data.push(obj);
            //     }
            //     return data;
            // },
            optionData(){
                let arr = [];
                for(let i = 0; i < this.allDishType.length; i ++){
                    let obj = {
                        value:i+1,
                        label:this.allDishType[i].name,
                        id:this.allDishType[i].dishes_classify_id
                    }
                    arr.push(obj)
                }
                return arr;
            },
            currentData(){
                let arr =[];
                for(let i = 0; i < this.currentDishType.length; i ++){
                    let obj = {
                        id:this.currentDishType[i].dishes_classify_id,
                        name:this.currentDishType[i].name
                    }
                    arr.push(obj)
                }
                return arr;
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:this.row,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){  
                        that.currentPage = num;
                         let obj = {
                            countPage:that.row,
                            perPage:that.currentPage,
                        }
                        that.getTypeData(obj)                      
                    },
                    pageCount:this.pageCount,//一共有几页
                }
                return data 
            },
            SearchPagingData(){
                var that = this;
                let data = {
                    pageSize:this.row,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){  
                       that.currentPage = num;
                       console.log(that.dishTypeName)
                       let obj = {
                            name:that.dishTypeName,
                            countPage:that.row,
                            perPage:that.currentPage,
                        }
                        that.getUnderTypeDish(obj).then(res=>{
                            if(res == 'success'){
                                that.isSearch = true;
                                let data =[];
                                for(let i = 0; i < that.dishData.length; i ++){
                                    let obj = {}
                                    obj.name = that.dishData[i].name;
                                    obj.price = that.dishData[i].price
                                    obj.id = that.dishData[i].dishes_main_id
                                    data.push(obj);
                                    that.showDishType = false;
                                    that.showSearchDishs = true;
                                }
                                that.allDishData = data;
                                that.TypePageCount = that.pageSize;
                            }
                        })                         
                    },
                    pageCount:this.pageSize,//一共有几页
                }
                return data 
            }
        },
        methods:{
             ...mapActions('foodsTypeSet',['getTypeData','searchDishType',
             'addDishType','deleteDish','deleteType','editDishType','getUnderTypeDish','getAllType']),
            searchType(val){
                this.currentPage = 1;
                this.selectValue = val
                // 向服务器请求该类型的菜品里面的所有菜品
                this.dishTypeName = this.optionData[val-1].label
                this.dishTypeId = this.optionData[val-1].id
                let obj = {
                    name:this.dishTypeName,
                    perPage: this.currentPage,
                    countPage:this.row,
                }  
                this.getUnderTypeDish(obj).then(res=>{
                    if(res == 'success'){
                        this.isSearch = true;
                        this.$message.success({message: '搜索成功！!'})
                        let data =[];
                        for(let i = 0; i < this.dishData.length; i ++){
                            let obj = {}
                            obj.name = this.dishData[i].name;
                            obj.price = this.dishData[i].price
                            obj.id = this.dishData[i].dishes_main_id
                            data.push(obj);
                            this.showDishType = false;
                            this.showSearchDishs = true;
                        }
                        this.allDishData = data;
                        this.TypePageCount = this.pageSize;
                    }else{
                        this.$message.error('搜索失败失败！！!')
                        this.allDishData = []
                    }
                     
                })
                
            },
            newTypes(){
                this.showNewDishType = true;
            },
            confirmNewType(){
                // 这里向服务器发起请求，菜品类别名是否重复，不重复则新增成功
                if(this.dishTypeName == ''){
                    this.$message.error('菜品类别名不能为空!!')
                    this.tips = '菜品类别名不能为空!';
                    this.beforeNewTypeSuccess = true;     
                }else{
                    let obj = {name:this.dishTypeName}
                    this.addDishType(obj).
                    then(res=>{
                        if(res == 'success'){
                            this.$message.success({message: '恭喜你添加菜品类别成功！!'})
                            let obj = {
                                countPage:this.row,
                                perPage:this.currentPage,
                            }
                            this.getTypeData(obj)
                            // this.tips = '恭喜你添加菜品类别成功！!';
                            // this.beforeNewTypeSuccess = true;
                            let op = {userName:this.$store.state.user.userName,
                                operationDate:this.$store.state.nowTime.time, operationMessage:'添加菜品类别'}
                            this.$store.dispatch('userOperation',op) 
                        }else{
                            this.$message.error('添加菜品类别失败！！!')
                            // this.tips = '添加菜品失败！！!';
                            // this.beforeNewTypeSuccess = true; 
                        }
                    })
                    
                }
                this.showNewDishType = false;
            },
            cancelNewType(){
                this.showNewDishType = false;
            },
            isNewSuccess(){    
                this.dishTypeName = '';  
                this.beforeNewTypeSuccess = false;
                this.getAllType()
                this.getTypeData(this.reqDishTypeData) 
            },
            beforeShowDishs(type){         
                this.dishTypeName = type.name;
                this.dishTypeId = type.id
                let obj = {
                    dishes_classify_id:this.dishTypeId,
                }
                this.deleteType(obj).
                then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '删除类别成功！'})
                        let obj = {
                            countPage:this.row,
                            perPage:this.currentPage,
                        }
                        this.getTypeData(obj)
                        let op = {userName:this.$store.state.user.userName,
                            operationDate:this.$store.state.nowTime.time, operationMessage:'删除菜品类别'}
                        this.$store.dispatch('userOperation',op)
                    }else{
                        this.$message.error('该类型还有菜品！请先删除！!')
                        let obj = {
                            name:this.dishTypeName,
                            countPage:this.row,
                            perPage:this.currentPage,
                        }
                        this.getUnderTypeDish(obj).then(res=>{
                            if(res == 'success'){
                                this.isSearch = true;
                                let data =[];
                                for(let i = 0; i < this.dishData.length; i ++){
                                    let obj = {}
                                    obj.name = this.dishData[i].name;
                                    obj.price = this.dishData[i].price
                                    obj.id = this.dishData[i].dishes_main_id
                                    data.push(obj);
                                    this.showDishType = false;
                                    this.showSearchDishs = true;
                                }
                                this.allDishData = data;
                                this.TypePageCount = this.pageSize;
                            }
                        })
                        this.showDishType = false;
                        this.showSearchDishs = true;
                    }
                })
            },
            beforeEditDishType(type){
                this.beforeEditType = true;
                this.dishTypeName = type.name;
                this.dishTypeId = type.id
            },
            confirmEditType(){
                let obj = {
                    dishes_classify_id:this.dishTypeId,
                    name:this.dishTypeName,
                }
                console.log(obj)
                this.editDishType(obj).
                then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '修改菜品类别成功！'})
                        // alert('修改菜品类别成功！')
                        let obj = {
                            countPage:this.row,
                            perPage:this.currentPage,
                        }
                        this.getTypeData(obj)
                        this.beforeEditType = false;
                        let op = {userName:this.$store.state.user.userName,
                            operationDate:this.$store.state.nowTime.time, operationMessage:'修改菜品类别'}
                        this.$store.dispatch('userOperation',op)
                    }else{
                        this.$message.error('修改菜品类别失败！!')
                        // alert('修改菜品类别失败！')
                        this.beforeEditType = false;
                    }
                })
            },
            showDishs(){
                if(this.isShowDishDetail){
                    let oobj = {
                        name:this.dishTypeName,
                        perPage: this.currentPage,
                        countPage:this.row,
                    } 
                    this.getUnderTypeDish(oobj).then(res=>{
                    if(res == 'success'){
                        let data =[];
                        for(let i = 0; i < this.dishData.length; i ++){
                            let obj = {}
                            obj.name = this.dishData[i].name;
                            obj.price = this.dishData[i].price
                            obj.id = this.dishData[i].dishes_main_id
                            data.push(obj);
                        }
                        this.allDishData = data;
                    }else{
                        this.allDishData = []
                    }
                     
                    })
                    this.beforeDeleteType = false;
                    this.showDishType = false;
                    this.showSearchDishs = true;
                }else{
                    this.getTypeData(this.reqDishTypeData)
                    this.beforeDeleteType = false;
                    this.showDishType = true;
                    this.showSearchDishs = false; 

                }
                
                // 重置 菜品数据
            },
            deleteDishs(id){
                console.log(id)
                // 向服务器请求删除该菜品
                let obj = {
                   dishes_main_id:id
                }
                this.deleteDish(obj).then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '删除菜品成功！'})
                       let oobj = {
                        name:this.dishTypeName,
                        perPage: this.currentPage,
                        countPage:this.row,
                        } 
                        this.getUnderTypeDish(oobj).then(res=>{
                            if(res == 'success'){
                                let data =[];
                                for(let i = 0; i < this.dishData.length; i ++){
                                    let obj = {}
                                    obj.name = this.dishData[i].name;
                                    obj.price = this.dishData[i].price
                                    obj.id = this.dishData[i].dishes_main_id
                                    data.push(obj);
                                }
                                this.allDishData = data;
                            }else{
                            this.allDishData = []
                            }                         
                    })
                    let op = {userName:this.$store.state.user.userName,
                        operationDate:this.$store.state.nowTime.time, operationMessage:'删除菜品'}
                    this.$store.dispatch('userOperation',op)
                    }else{
                        // alert('删除菜品失败!')
                        this.$message.error('删除菜品失败!')
                    }
                });
            },
            deleteDishType(){
                // 向服务器请求 该类菜品里面是否还有菜品
                let obj = {
                    dishes_classify_id:this.dishTypeId
                }
                this.deleteType(obj).
                then(res=>{
                    if(res=='success'){
                        this.$message.success({message: '删除类别成功！！'})
                        let op = {userName:this.$store.state.user.userName,
                            operationDate:this.$store.state.nowTime.time, operationMessage:'删除菜品类别'}
                        this.$store.dispatch('userOperation',op)
                        this.getTypeData(this.reqDishTypeData)
                        this.showSearchDishs = false
                        this.showDishType = true;   
                    }else{
                        this.$message.error('删除失败，请先删除菜品!')
                        
                    }
                })  
                
            },
            returnDishType(){
                this.isSearch = false;

                let obj = {
                    countPage:this.row,
                    perPage:this.currentPage,
                }
                this.getTypeData(obj)
                this.showDishType = true;
                this.showSearchDishs = false;
            },
            
        },
        created(){ 
            let obj = {
                countPage:this.row,
                perPage:this.currentPage,
            }
            this.getTypeData(obj) 
            this.getAllType()
           
        }
    }
</script>

<style scoped lang = 'less'>
        .searchBox{
        height: 30px;
        margin-top: 30px;
        margin-bottom: 10px;
        .searchType{
            float: right;
            width: 150px;
            height: 30px;
            margin-left: 10px;
        }
        .searchBtn{
            float: right;
            width: 100px;
            margin-left: 10px;
        }
        .btnBox{
            float: left;
            width: 230px;
            height: 30px;
            margin-right: 10px;
            position: relative;
            .newType{
                width: 100px;
                position: absolute;
                left: 0;
                
            }
        }    
    }
    .types{
            margin-top: 30px;
        }
    .operateBtn{
        text-align: center;
        margin-top: 30px;
        button{
            width: 100px;
            margin-left: 10px;
            margin-right: 10px;
        }
    }
    .paging{
        margin-top: 25px;
        text-align: center;
    }
    .tips{
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        input{
            width: 200px;
            font-size: 14px;
            letter-spacing: 2px;
        }
        .el-input{
            width: 50%!important;
        }
    }
    .formBox{
        list-style: none;
        border: 1px solid #fff;
        padding: 0;
        .formItem{
            margin-top: 10px;
            text-align: center;
            label{
                display: inline-block;
                width: 80px;
                color: #000;
                text-align: center;
                line-height: 30px;
                margin-right: 10px;
            }
            .el-input{
                width: 50%;
                display: inline-block;
            }
            button{
                width: 100px;
                margin-left: 10px;
                margin-top: 30px;
            }
        }
    }

</style>